<template>


 <div id="app" class="main" v-cloak>

   <div class="footers">
  <div class="footers_text">{{menuNmaedata.menuName==null?'书签目录':menuNmaedata.menuName}} <span class="totalCount">{{totalCount}}</span></div>
  <div class="footers_icon">
    <a class="icon-vehicle icon-category" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
    <a class="icon-vehicle icon-column1" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
    <a class="icon-vehicle icon-customization" @click="updateMenu()"></a>
  </div>
</div>
   <div v-show="bookmarkliststord" >
     <div class="bounce">
     <span class="letter">当</span>
     <span class="letter">前</span>
     <span class="letter">分</span>
     <span class="letter">类</span>
     <span class="letter">下</span>
     <span class="letter">没</span>
     <span class="letter">有</span>
     <span class="letter">收</span>
     <span class="letter">藏</span>
     </div>
   </div>

   <div class="arc" v-show="loding"></div>
   <h1 v-show="loding"><span>LOADING</span></h1>
   <!--   列表模式-->
<div v-if="layout == 'list'" v-show="lodinglist">

  <el-row :gutter="10" v-show="bookmarkliststords" >
    <el-col :xs="24" :sm="24" :md="24" :lg="24" v-for="list in bookMarklist" :key="list.userId">
      <div class="succinct" @click="windowurl(list.url,list.bookmarkId)">
      <div class="succinct_text">
      <div class="succinct_text_i" >
        <img :ng-src="'http://favicon.luchenqun.com/?url='+list.url" :src="'https://www.zyymg.com/v2/get.php?url='+list.url" onerror="this.src='https://s2.ax1x.com/2020/02/02/1YRugf.png'" alt="" width="14" height="14" style="display: block;float:left;margin-top:3px;" ng-show="item.littleIcon" class="">

      {{list.title}}</div>
      </div>
 <div class="succinct_icon"  @click.stop="">
   <el-dropdown trigger="click" >
      <span class="el-dropdown-link">
        <i class="icon-vehicle icon-ellipsis lb"></i>
      </span>
     <el-dropdown-menu slot="dropdown" class="">
       <el-dropdown-item icon="el-icon-delete" @click.native="bookmarkdelete(list.bookmarkId)">删除</el-dropdown-item>
       <el-dropdown-item icon="el-icon-edit" @click.native="handleEdit(list.bookmarkId)">编辑</el-dropdown-item>
       <el-dropdown-item icon="el-icon-paperclip" @click.native="copyText(list.url)">复制</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </div>
      </div>
    </el-col>
  </el-row>
  <div >
    <!--//分页-->
    <el-pagination
      background
      :hide-on-single-page="values"

      @current-change="handleCurrentChange"
      :page-size="PageSize"
      :current-page="PageNo"
      layout=" prev, pager, next"
      :total="totalCount">
    </el-pagination>
  </div>
</div>

<!--卡片模式-->
   <div v-if="layout == 'grid'">
   <el-row :gutter="10" v-show="bookmarkliststords" >
     <el-col :xs="24" :sm="24" :md="8" :lg="8" v-for="list in bookMarklist" :key="list.userId">
     <div class="content" @click="windowurl(list.url,list.bookmarkId)">
       <div style="height:100px" :title="list.title">
         <div class="bookmarktitle" >{{list.title}}</div>
         <div class="bookmarktext">{{list.description}}</div>
       </div>
       <div class="bookmarkurl" @click.stop="">
         <img :ng-src="'http://favicon.luchenqun.com/?url='+list.url" :src="'http://favicon.luchenqun.com/?url='+list.url" onerror="this.src=''" alt="" width="14" height="14" style="display: block;float:left;margin-top:3px;" ng-show="item.littleIcon" class="">

<!--         <img :ng-src="'data:image/png;base64,'+list.image" :src="'data:image/png;base64,'+list.image" onerror="this.src='https://www.zyymg.com/v2/get.php?url='+list.url" alt="" width="14" height="14" style="display: block;float:left;margin-top:3px;" ng-show="item.littleIcon" class="">-->


         <span >{{list.urls}}</span>
         <span class="date">{{list.createTime | changeTime}}</span>
<el-dropdown trigger="click" >
      <span class="el-dropdown-link">
        <i class="icon-vehicle icon-ellipsis el-icon"></i>
      </span>
           <el-dropdown-menu slot="dropdown" class="dropdown">
             <el-dropdown-item icon="el-icon-delete" @click.native="bookmarkdelete(list.bookmarkId)"></el-dropdown-item>
             <el-dropdown-item icon="el-icon-edit" @click.native="handleEdit(list.bookmarkId)"></el-dropdown-item>
             <el-dropdown-item icon="el-icon-paperclip" @click.native="copyText(list.url)"></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
   </el-col>
   </el-row>
<div >

<!--//分页-->
  <el-pagination
  background
  :hide-on-single-page="values"

  @current-change="handleCurrentChange"
  :page-size="PageSize"
  :current-page="PageNo"
  layout=" prev, pager, next"
  :total="totalCount">
  </el-pagination>

</div>







   </div>

   <!-- 编辑界面 -->
   <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click='closeDialog("edit")' >
     <el-form label-width="20%"  :model="pojoData" :rules="rules" ref="pojoData">
       <el-input type="hidden" v-model="pojoData.bookmarkId"></el-input>
       <el-form-item label="标题" prop="title">
         <el-input  v-model="pojoData.title"   auto-complete="off"  placeholder="请输入书签"></el-input>
       </el-form-item>
       <el-form-item label="URL" prop="url">
         <el-input  v-model="pojoData.url"  auto-complete="off"   placeholder="请输入URL"></el-input>
       </el-form-item>
       <el-form-item label="简介" prop="description">
         <el-input  v-model="pojoData.description" auto-complete="off" placeholder="请输入简介"></el-input>
       </el-form-item>
       <el-form-item label="分类" prop="menuId">
<!--         <el-input v-model="pojoData.srotId" auto-complete="off" placeholder="分类ID"></el-input>-->
         <SelectTree
           :props="props"
           :options="optionData"
           :value="menuId"
           :clearable="isClearable"
           :accordion="isAccordion"
           @getValue="getValue($event)"
         />
       </el-form-item>

     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button size="small" plain round @click='closeDialog("edit")'>取消</el-button>
       <el-button size="small" type="primary" plain round class="title" @click="update()">保存</el-button>
     </div>
   </el-dialog>





<!--   添加书签弹窗-->




 </div>
 </div>
</template>
<script >
  import {
    Row,
    Col
  } from 'element-ui';
  import SelectTree from "../components/treeSelect.vue";
  import { format } from 'timeago.js';

export default {
  components: {
    Row,
    Col,
    SelectTree,
  format
  },
  inject:['reload'],
  data() {
    return {
      editFormVisibleq:true,//添加书签
      bookmarkliststords:true,
      bookmarkliststord:false,
      // 视图模型，可能的值是 "grid" 或 "list"。
      layout: 'list',
      isClearable:true,      // 可清空（可选）
      isAccordion:true,      // 可收起（可选）
      // menuId:20,          // 初始ID（可选）
      props:{                // 配置项（必选）
        value: 'menuId',
        label: 'menuName',
        children: 'children',
      },
      PageNo:0,//第几页
      PageSize:30,// 每页显示
      totalCount:0,//数量
      // currentPage:1,//默认第一页
      list:[],
      menuId:0,
      bookMarklist:[],
      title: '编辑书签',
      editFormVisible: false,//控制编辑页面显示与隐藏
      pojoData:{},
      urltext:'?from=yunshuqian.com',//网址域名起推广作用
      rules: {},
      menuNmaedata:{},//当前目录名字
      values:true,//分页一页隐藏
      loding:true,
      lodinglist:false,//
    }
  },
  mounted(){
   // this.Refresh();
    //搜索
    // this.search();
  },

  filters: {
    //timeago.js插件
    //计算时间，类似于几分钟前，几小时前，几天前等
    changeTime(val){
      let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
      return format(time, 'zh_CN'); //转换成类似于几天前的格式
    }
  },

  /**
   * 创建完毕
   */

  computed:{


    /* 转树形数据 */
    optionData(){
      let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
      return  cloneData.filter(father=>{                      // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child=>father.menuId == child.parentId);       // 返回每一项的子级数组
        branchArr.length>0 ? father.children=branchArr : ''   //给父级添加一个children属性，并赋值
        return father.parentId==0;      //返回第一层
      });
    }
  },
  created(){

    this.judge()
  },


  methods: {
      //翻页
    handleCurrentChange(val) {
      // console.log(val)
      var _this=this;
      var menuIds=this.$route.params.menuId;
      // 改变默认的页数
      // this.PageNo=(val-1)*this.PageSize;
      //打开loding
      _this.loding=true
      _this.lodinglist=false
      if (menuIds!=7070){
      this.$axios.get(`/api/bookmark/queryAllList?menuId=${menuIds}&&pageNo=${(val-1)*this.PageSize}&&pageSize=${this.PageSize}`).then(response => {
        _this.bookMarklist = response.data;
        _this.total=_this.bookMarklist;
        _this.getloding()
        if (Object.keys(_this.bookMarklist).length==0){
          _this.bookmarkliststords=false;
          _this.bookmarkliststord=true;
        }

      });
      }else{
        //回收站的分页
        this.$axios.get(`/api/bookmark/queryAllList?pageNo=${(val-1)*this.PageSize}&&pageSize=${this.PageSize}&&idelete=1`).then(response => {
          _this.bookMarklist = response.data;
          _this.total=_this.bookMarklist;
          _this.getloding()
          if (Object.keys(_this.bookMarklist).length==0){
            _this.bookmarkliststords=false;
            _this.bookmarkliststord=true;
          }
        });
      }
    },
    judge(){
      if (this.$route.params.menuId==6060){ //稍后再看
        this.momentlList();
        return;
      }else if (this.$route.params.menuId==7070){ //回收站
        this.deleteList();
      } else if (this.$route.params.menuId==8080){ //搜索
        this.search();
      }else {
        this.fetchData();
      }
    },
    updateMenu(){
      //修改目录
      this.$router.push({ path: '/menuStree', query: { menuId:this.$route.params.menuId,activeName:'second' }})
    },

    //menu显示  修改的下拉
    fetchDatamenu (){
      this.$axios.get(`/api/menu/queryAllList`,this.searchMap).then(response => {
        this.list = response.data;

      });
    },
    // 取值
    getValue(value){
      var _this=this;
      _this.pojoData.menuId = value
    },
    //接受传过来的搜索参数然后搜索
    search(){
      var _this=this;
      if( _this.$route.query.title!=null){
      //获取搜索框的值
      _this.$route.query.title;
      this.$axios.get(`/api/bookmark/queryAllList?title=${this.$route.query.title}`).then(response => {
        _this.bookMarklist = response.data;
        this.getloding()
        if (Object.keys(_this.bookMarklist).length==0){
          _this.bookmarkliststords=false;
          _this.bookmarkliststord=true;
        }
      });
      }

    },


   copyText(text){ // text: 要复制的内容， callback: 回调
     var Url2=text+this.urltext;
     var oInput = document.createElement('input');
     oInput.value = Url2;
     document.body.appendChild(oInput);
     oInput.select(); // 选择对象
     document.execCommand("Copy"); // 执行浏览器复制命令
     oInput.className = 'oInput';
     oInput.style.display='none';
     this.$message({type: 'success', message: '复制成功'})
  },


    windowurl(url,bookmarkId){
      window.open(url+this.urltext);
      //修改状态
      if (this.$route.params.menuId=6666){
        this.$axios.get(`/api/bookmark/updateBookmarkStart?bookmarkId=${bookmarkId}`).then(response => {

          if (response.status == 200 && response.data.status == 'success') {
            this.momentlList()
            this.$message({type: 'success', message: '此书签被打开,移除稍后再看,并且公开显示!'})

          }else {
            this.$message({type: 'error', message: '移除失败!'})
          }

        });

      }

    },
    //回收站
      deleteList(){
    var _this=this;
        _this.menuNmaedata.menuName="回收站"

        //稍后再看总记录total
        this.$axios.get(`/api/bookmark/countMenuId?idelete=1`).then(response => {
          _this.totalCount = response.data;
          //隐藏分页
          if (_this.totalCount>30) {
            _this.values=false;
          }

        });

        this.$axios.get(`/api/bookmark/queryAllList?idelete=1`).then(response => {
          _this.bookMarklist = response.data;
          //无收藏提示
          if (Object.keys(_this.bookMarklist).length==0){
            _this.bookmarkliststords=false;
            _this.bookmarkliststord=true;
          }
          this.getloding()
        });


  },

    //稍后再看
    momentlList(){
      var _this=this;
      _this.menuNmaedata.menuName='稍后再看'

      //稍后再看总记录total
      this.$axios.get(`/api/bookmark/countMenuId?start=3`).then(response => {
        _this.totalCount = response.data;
        //隐藏分页
        if (_this.totalCount>30) {
          _this.values=false;
        }
      });

      this.$axios.get(`/api/bookmark/queryAllList?start=3`).then(response => {
        _this.bookMarklist = response.data;
        this.getloding()
        //无收藏提示
        if (Object.keys(_this.bookMarklist).length==0){
          _this.bookmarkliststords=false;
          _this.bookmarkliststord=true;
        }
      });


    },
    //我的收藏
    fetchData (PageNo){
      var _this=this;

      var menuIds=this.$route.params.menuId;
      //查询目录名字  menuNmaedata
      this.$axios.get(`/api/menu/bookMakeName?menuId=${menuIds}`).then(response => {
        _this.menuNmaedata = response.data;
      });

      //查询当前目录总记录total
      this.$axios.get(`/api/bookmark/countMenuId?menuId=${menuIds}`).then(response => {
        _this.totalCount = response.data;
        //隐藏分页
        if (_this.totalCount>30) {
          _this.values=false;
        }
      });

      this.$axios.get(`/api/bookmark/queryAllList?menuId=${menuIds}&&pageNo=${this.PageNo}&&pageSize=${this.PageSize}`).then(response => {
        _this.bookMarklist = response.data;
        _this.total=_this.bookMarklist;
        if (Object.keys(_this.bookMarklist).length==0){
          _this.bookmarkliststords=false;
          _this.bookmarkliststord=true;
        }
        _this.getloding()

      });




    },
    //关闭过渡
    getloding(){
      var _this=this;
      _this.loding=false;
      _this.lodinglist=true;
    },
//先回显 后修改
    handleEdit(id){
      var _this=this;
      // 打开窗口
      _this.editFormVisible = true;
      _this.fetchDatamenu()
      // 调用查询
      _this.$axios.get(`/api/bookmark/selectByPrimaryKey/${id}`).then((response) =>{
        _this.pojoData= response.data;
        //当前目录
        _this.menuId=_this.pojoData.menuId

      })
    },
    //修改
    update(){
      var _this = this;

      this.$axios.post(`/api/bookmark/updateBookMark`,_this.pojoData).then(response => {
        if (response.status == 200 && response.data.status == 'success') {
          _this.$message({type: 'success', message: '修改成功!'})

          this.editFormVisible = false ;//关闭窗口
          this.fetchData();
          return;

        }
        if (response.data.status == 1000015) {
          _this.$message({type: 'error', message: '请选择最下级目录，不要选择节点'})
          return;
        }
        _this.$message({type: 'error', message: '修改失败!'})
      });
    },


    // 删除
    bookmarkdelete(id){

      var _this = this;
      this.$confirm('删除该书签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$axios.get(`/api/bookmark/deleteByPrimaryKey/${id}`).then(response => {
          if (response .status == 200 && response .data.status == 'success') {
            _this.$message({type: 'success', message: '删除成功!'})
            this.fetchData();
            return;
          }

          _this.$message({type: 'error', message: '删除失败!'})
        }, response => {

          _this.$message({type: 'error', message: '删除失败!'})
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      }
    },

  }
}
</script>

<style>
  [v-cloak] {
    display: none;
  }
.main{
  background-color: #F5F5F5;
}

  .footers{
   width: 100%;
    height: 30px;
  background-color: #FFFFFF;
    margin-bottom: 10px;
    border-radius: 10px;
    border: #E4ECF3 1px solid;
    font-weight: bold;

  }
  .footers_text{
    float: left;
    width: 88%;
    line-height: 30px;
    font-size: 0.8em;
    text-indent: 2%;
    font-family:rst,'Uu';
    color: #5f9cef;
  }

  .footers_icon{
    float: left;
    width: 12%;
    line-height: 30px;
  }
  .footers_icon i{
    margin-left: 10px;
  }

/*编辑框*/
  .el-dialog{
    font-family:rst,'Uu';
    border-radius: 10px;
    font-weight: bold;

  }
/*编辑框结束*/



  /*弹窗修改样式*/
.el-form-item__label{
  font-size: 0.8vw;
  font-family:rst,'Uu';
  margin-left: -2vw;

}
  .el-input{
    width: 75%;
    margin-left: -1vw;
  }

  /*结束*/
  .el-dropdown{
    float: right;
    margin-right: 2vw;

  }

  .el-icon{
    font-size: 1.8em;
  }
  .el-dropdown-link i{
    font-size: 20px;
  }
  /*下拉大小颜色*/
  .dropdown{
    background-color: #f4fbff;

  }
  .content{
    background-color: #FFFFFF;
    border-radius: 5px;
    height: 130px;
    margin-bottom: 13px;
    border: #E4ECF3 1px solid;
  }



  .content:hover{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    transform: translate(0,5px);
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    transition: all 0.3s linear;
  }

  .bookmarkurl{

    margin-left: 2px;
  }
  .bookmarkurl span{
    font-size: 12px;
    font-family:rst,'Uu';
    margin-left: 2px;
  }
  .bookmarktitle{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 98%;
    margin-left: 5px;
    font-weight: 600;
    font-size: 14px;
    font-family:rst,'Uu';
    height: 42px;
    margin-top: 4px;
    margin-right: 4px;
    margin-left: 4px;
  }
  .bookmarktitle:hover{
    color: #5F9DF0;
  }
  .bookmarktext{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 98%;
    margin-left: 5px;
    font-size: 12px;
    font-family:rst,'Uu';
    color: #8F918F;
    margin-right: 4px;
    margin-left: 4px;
  }
  .date {
    color: #BFCCE0;
    font-family:rst,'Uu';
  }
  .el-icon-setting{
    margin-left: 130px;

  }

  /**
  简洁模式
   */
  .succinct{
    width: 100%;
    height: 48px;
    font-size: 0.8em;
    font-family:rst,'Uu';


  }

  .succinct:hover{
    background-color: #FFFFFF;
    border-radius: 6px;
  }

  .succinct_text_i{
    float: left;
    width:80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 19px;
    padding-top: 16px;

  }
  .succinct_text_i img{
    margin-top: 1px !important;
    margin-right: 23px;
    width: 15px;
    height: 15px;
  }
  .succinct_icon{
    float: right;
  }
  .succinct_icon i{
    margin-top: 1px !important;
    font-size: 1.6em;
    margin-left: 18px;
    line-height: 48px;
    font-weight: normal;

  }
  .totalCount{
    width: 40px;
    height: 30px;
    background: #8360c3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border-radius: 3px;
    color: #fffbf4;
    margin-left: 3px;


  }

  /*loding*/

  .arc {
    margin-top: 50px!important;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-top: 2px solid #ffea29;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    animation: rt 2s infinite linear;
  }
  .arc::before {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border-top: 2px solid #8d29ff;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    animation: rt 4s infinite linear reverse;
    content: "";
  }
  .arc::after {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    border-top: initial;
    border-left: initial;
    border-right: initial;
    animation: cw 1s infinite;
    content: "";
    background: #839ff0;
  }

  h1 {
    margin-top: 20px;
    height: 40px;
    margin: auto;
    top: 200px;
    left: 0;
    right: 0;
    bottom: 0;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 14px;
    font-weight: lighter;
    color: #5f9cef;
  }
  h1 span {
    display: none;
  }
  h1::after {
    animation: txt 5s infinite;
    content: "";
  }

  @keyframes rt {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes cw {
    0% {
      width: 0;
      height: 0;
    }
    75% {
      width: 40px;
      height: 40px;
    }
    100% {
      width: 0;
      height: 0;
    }
  }
  @keyframes txt {
    0% {
      content: "LOADING...";
    }
    50% {
      content: "LOADING..";
    }
    100% {
      content: "LOADING.";
    }
  }
  /*文字滚动css*/
  .bounce {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #7c6fff;
    height: 100%;
    font: normal bold 1em "Product Sans", sans-serif;
    white-space: nowrap;
    margin-top: 5% ;
  }

  .letter {
    animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
    display: inline-block;
    transform: translate3d(0, 0, 0);
    margin-top: 0.5em;
    text-shadow: rgba(188, 174, 240, 0.4) 0 0 0.05em;
    font: normal 500 1em 'Varela Round', sans-serif;
  }
  .letter:nth-child(1) {
    animation-delay: 0s;
  }
  .letter:nth-child(2) {
    animation-delay: 0.133333333s;
  }
  .letter:nth-child(3) {
    animation-delay: 0.233333333s;
  }
  .letter:nth-child(4) {
    animation-delay: 0.333333333s;
  }
  .letter:nth-child(5) {
    animation-delay: 0.4333333333s;
  }
  .letter:nth-child(6) {
    animation-delay: 0.533333333s;
  }
  .letter:nth-child(7) {
    animation-delay: 0.633333333s;
  }
  .letter:nth-child(8) {
    animation-delay: 0.733333333s;
  }
  .letter:nth-child(9) {
    animation-delay: 0.833333333s;
  }
  .letter:nth-child(10) {
    animation-delay: 0.933333333s;
  }
  .letter:nth-child(11) {
    animation-delay: 1.133333333s;
  }
  .letter:nth-child(12) {
    animation-delay: 1.233333333s;
  }
  .letter:nth-child(13) {
    animation-delay: 1.333333333s;
  }
  .letter:nth-child(14) {
    animation-delay: 1.433333333s;
  }



  @keyframes bounce {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: rgba(124, 111, 255, 0.4) 0 0 0.05em;
    }
    100% {
      transform: translate3d(0, -1em, 0);
      text-shadow: rgba(107, 165, 255, 0.4) 0 1em 0.35em;
    }
  }

  /*结束*/

</style>

